<template>
    <div class="dirs-box">
        <div class="dirs-items-box" >
            <div class="title-box">
                <div class="arrow-box">
                    <el-icon class="arrow" v-show="iconRighe" 
                        @click="iconAngle"
                        v-if="daPorps.item.CUST_TYPE === 1"
                    ><CaretRight /></el-icon>
                    <el-icon class="arrow" v-show="iconBottom" 
                        @click="iconAngle"
                        v-if="daPorps.item.CUST_TYPE === 1"
                    ><CaretBottom /></el-icon> 
                </div>            
                <div class="icon-box" >                               
                    <!-- <el-checkbox v-model="daPorps.item.ADMID" 
                        :checked="daPorps.item.ADMID !== null ? true : false" 
                        size="large" 
                        @change="checkChangInfoToParent($event,daPorps.item)"
                    /> -->
                    <input type="checkbox" :value="daPorps.item.ADMID"
                        :checked="daPorps.item.ADMID !== null ? true : false"
                        @change="checkChangInfoToParent($event,daPorps.item)"
                    >
                    <el-icon>
                        <component :is="daPorps.item.CUST_TYPE ? 'Folder' : 'Document'"/>
                    </el-icon>
                    <span>{{ daPorps.item.TITLE }}</span>  
                    {{ daPorps.item.ADMID !== null }}
                </div>  
            </div>           
            <div class="aud-check">
                <input type="checkbox" :value="daPorps.item.IS_ADD ? daPorps.item.IS_ADD : 0"
                    :checked="daPorps.item.IS_ADD ? true : false"
                    @change="changeAud($event,daPorps.item,'add')"                    
                ><label class="aud-lab">增</label>
                <input type="checkbox" :value="daPorps.item.IS_UPDATE ? daPorps.item.IS_UPDATE : 0"
                    :checked="daPorps.item.IS_UPDATE ? true : false" 
                    @change="changeAud($event,daPorps.item,'update')"                   
                ><label class="aud-lab">改</label>
                <input type="checkbox" :value="daPorps.item.IS_DEL ? daPorps.item.IS_DEL : 0"
                    :checked="daPorps.item.IS_DEL ? true : false" 
                    @change="changeAud($event,daPorps.item,'del')"                   
                ><label class="aud-lab">删</label>
            </div>
        </div>
        <DirsOfAuthority v-for="(sub,j) in daPorps.item.children" :key="j" :item="sub" class="sub" :class="{show:subIsShow}"/>
    </div>
</template>

<script setup>
import {ref , defineProps ,computed ,watch} from 'vue'
import { mainStore } from '@/stores/store'

let useStore = mainStore()


let daPorps = defineProps({
    item: {
        type: Object
    },
    oldDirsInfo:{
        type: Array
    }
})

// const localProp = computed(() => daPorps.oldDirsInfo); // 使用 computed 来响应式地访问 prop
// const emit = defineEmits(['check-change'])

//目录展开/折叠
let iconRighe = ref(false)
let iconBottom = ref(true)
let subIsShow = ref(true)
const iconAngle = ()=>{
    iconRighe.value = !iconRighe.value
    iconBottom.value = !iconBottom.value
    subIsShow.value = !subIsShow.value
}

/**
 * 添加及删除权限明细
 * @param $event checkbox选中状态
 * @param row 选中的行数据
 */
const checkChangInfoToParent = ($event,row)=>{
    console.log($event.target.checked)
    console.log(row)
    //加入须添加
    if($event.target.checked){
        useStore.addNeedAddAuthDirsMidd(row)
    }
    //加入须删除
    if(!$event.target.checked){
        useStore.addNeedDelAuthDirsMidd(row)
    }    
}

/**
 * 修改权限中的增改删
 * @param $event checkbox选中状态
 * @param row 选中的行数据
 * @param type 增改删类型 add增 update改 del删
 */
const changeAud = ($event,row,type)=>{
    // console.log($event.target.checked)
    // console.log(row) 
    // console.log(type)
    if(type === 'add') row.IS_ADD = $event.target.checked ? 1 : 0 
    if(type === 'update') row.IS_UPDATE = $event.target.checked ? 1 : 0
    if(type === 'del') row.IS_DEL = $event.target.checked ? 1 : 0
    useStore.addNeedUpdateAuthDirsMidd(row)
}

</script>

<style lang="less" scoped>
.dirs-box{
    width: 100%;
    .dirs-items-box{
       height:1.25rem;
       width: 95%;
       display: flex;
       align-items: center;
       .title-box{
            width: 75%;
            display: flex;
            align-items: center;
            .arrow-box{
                width: 10%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .icon-box{
                width: 90%;
                display: flex;
                align-items: center; 
                color:rgb(67, 70, 70);
                .el-checkbox{
                    margin-right: .625rem;
                }
                span{
                    font-size:.875rem;
                    padding-left:.3125rem;
                }
            }
       }
       .aud-check{
            width: 25%;
            display: flex;
            // justify-content: flex-end;
            justify-content: center;
            .aud-lab{
                margin-left: .625rem;
                margin-right: .625rem;
                font-size: .875rem;
            }
       }
        .item-sub{
            padding-left: .625rem;
        }
    }
    .sub{
        padding-left: .625rem;
        display: none;
    }
    .sub.show{
        display: block;
    }
}


</style>